---
type: tutorial
unitTitle: Создавайте и проектируйте с помощью UI-компонентов Astro
title: 'Отметка: Модуль 3 - Компоненты'
description: |-
  Руководство: Создайте свой первый блог на Astro —
  Создавайте компоненты Astro для повторного использования кода общих элементов на вашем сайте
i18nReady: true
---

import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';

Теперь, когда файлы `.astro` и `.md` генерируют целые страницы на вашем сайте, пришло время создавать и повторно использовать небольшие фрагменты HTML с помощью компонентов Astro!

## Забегая вперёд

В этом модуле вы узнаете, как создавать **компоненты Astro** для повторного использования кода общих элементов на вашем сайте.

Вы создадите:
- Компонент **Navigation**, который отображает меню со ссылками на ваши страницы
- Компонент **Footer**, который будет включаться в нижнюю часть каждой страницы
- Компонент **Social**, используемый в футере, который ссылается на профили в соцсетях
- Интерактивный компонент **Hamburger** для переключения навигации на мобильных устройствах

Попутно вы будете использовать CSS и JavaScript для создания отзывчивого дизайна, реагирующего на размеры экрана и действия пользователя.



<Box icon="check-list">
## Контрольный список

<Checklist>
- [ ] Я готов создать несколько компонентов Astro!
</Checklist>
</Box>
